<template>
  <tag-info 
    v-if="info"
    :pic="info.cover"
    :name="info.tag_name" 
    :follow="info.count.atten"
    :videos="videoTotal"
    :focused="info.is_atten !== 0"
  >
  </tag-info>
  <tag-related v-if="tags.length > 0" :list="tags"></tag-related>
  <tag-video v-if="videos.length > 0" :list="videos"></tag-video>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import TagInfo from './info'
import TagRelated from './related'
import TagVideo from './video'
import { tagApi } from '@/api'
export default {
    name: 'Tag',
    components: {
      TagInfo,
      TagRelated,
      TagVideo
    },
    props: {
      tid: {
        type: [Number, String],
        required: true
      }
    },
    setup(props) {
      const params = reactive({
        info: null,
        tags: [],
        videos: [],
        videoTotal: 0
      })

      const initData = () => {
        getData()
        getRelated()
        getVideos()
      }

      const getData = async () => {
        try {
          const { data } = await tagApi.getInfo({
            tag_id: props.tid
          })
          params.info = data
        } catch (error) {
            
        }
      }

      const getRelated = async () => {
        try {
          const { data } = await tagApi.getRelated({
            tag_id: props.tid
          })
          params.tags = data
        } catch (error) {
            
        }
      }

      const getVideos = async () => {
        try {
          const { data, total } = await tagApi.getVideos({
              tid: props.tid
          })
          if (data) {
            params.videos = data
            params.videoTotal = total
          }
        } catch (error) {
            
        }
      }      

      watch(() => props.tid, () => {
        initData()
      }, {
        immediate: true
      })

      return {
        ...toRefs(params)
      }
    }
}
</script>

<style>

</style>